<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
      </div>
      <script>
          /* 
        - data配置项可以是Object 也可以是 Function,但是在组件中必须使用function格式

        组件中data为什么是一个函数而不是对象???
        - 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
      */
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg: "hello Vue"
                }
            }
        })
      </script>
</body>
</html>